<template>
  <div class="study-plan">
    <van-nav-bar
      title="作业中心"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content" v-if="active == 0">
      <div class="list" v-for="i in 10" :key="i">
        <div class="list-img">
          <img src="@img/png.png" alt="" />
        </div>
        <div class="list-item">
          <div class="item-title">作业名称作业名称</div>
          <div class="item-time">2023-07-02 12:22</div>
        </div>
        <div class="list-r">
          <div class="pic green">100分</div>
          <!-- <div class="arrow"><van-icon name="arrow" /></div> -->
        </div>
      </div>
    </div>
    <div class="study-plan__content" v-if="active == 1">
      <div class="list" v-for="i in 10" :key="i">
        <div class="list-img">
          <img src="@img/png.png" alt="" />
        </div>
        <div class="list-item">
          <div class="item-title">作业名称作业名称</div>
          <div class="item-time">待批阅</div>
        </div>
        <div class="list-r">
          <!-- <div class="pic green">100分</div> -->
          <div class="arrow"><van-icon name="arrow" /></div>
        </div>
      </div>
    </div>

    <div class="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item>
          <span>我的作业</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>待批阅</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      active: 0,
      icon: {
        active: "https://img.yzcdn.cn/vant/user-active.png",
        inactive: "https://img.yzcdn.cn/vant/user-inactive.png",
      },
    };
  },
  methods: {
    back() {
      window.history.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  background: #f5f9fc;
  min-height: 100vh;
  ::v-deep(.van-nav-bar__placeholder) {
    background: #ffffff;
  }
  &__content {
    padding: 12px 16px 50px;
    .list {
      background: #ffffff;
      border-radius: 4px;
      margin-bottom: 12px;
      padding: 17px 16px;
      display: flex;
      .list-img {
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .list-item {
        padding-left: 10px;
        flex: 2;
        .item-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #272b2d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          padding-bottom: 6px;
        }
        .item-time {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          line-height: 17px;
          text-align: left;
          font-style: normal;
        }
      }
      .list-r {
        display: flex;
        align-items: center;
        .pic {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;

          line-height: 25px;
          text-align: center;
          font-style: normal;
        }
        .green {
          color: #0dc678;
        }
        .yellow {
          color: #ff7140;
        }
      }
    }
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
}
</style>
